import React, { FC } from 'react';

import { TemplateDetailData } from '../../../models/template-detail.types';
import { CommonListExperience } from '../components/CommonListExperience';
import { CommonModuleBox } from '../components/CommonModuleBox';
import { CommonPersonalInfo } from '../components/CommonPersonalInfo';
import { getModuleComponent } from './module-component.mapping';

const COM_PREKEY = 'CoolTemplateDetail';

if (process.env.BROWSER) {
    require('./cool-tmpl.scss');
}

interface CoolTemplateDetailProps extends TemplateDetailData {}

const CoolTemplateDetail: FC<CoolTemplateDetailProps> = (props) => {
    const filteredModules = props.modules
        ?.filter(Boolean)
        ?.filter((module) => !!module.content)
        // #TODO move this to node side
        ?.sort((a, b) => a.priority - b.priority);

    return (
        <div className="rsmd-box">
            <CommonModuleBox specialClassName="bg-light-green mb-20">
                <CommonPersonalInfo {...props.personalInfo} />
            </CommonModuleBox>
            {/* advances */}
            {props.personalInfo?.advances?.length > 0 && (
                <CommonModuleBox title="个人优势" specialClassName="is-list-inside">
                    <CommonListExperience
                        experiences={props.personalInfo.advances}
                        specialKeyTitle="advance"
                    />
                </CommonModuleBox>
            )}

            {filteredModules?.length > 0 &&
                filteredModules?.map((module, i) => {
                    const ModuleCom = getModuleComponent(module.moduleComponentType);

                    return (
                        <CommonModuleBox
                            key={`${COM_PREKEY}_module_${module.name}_${i}`}
                            title={module.name}
                        >
                            <ModuleCom {...module.content} />
                        </CommonModuleBox>
                    );
                })}
        </div>
    );
};

CoolTemplateDetail.displayName = 'CoolTemplateDetail';

export { CoolTemplateDetail, CoolTemplateDetailProps };
